import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom'
import { Input, Icon, Button, message } from 'antd';
import $ from 'jquery'

import "../static/login/login.styl"
import u from '../common.js'
import $http from '../common.js'

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      account: '',
      password: '',
      VideoSrc: 'require(../static/001.mp4)'
    }
  }
  componentWillMount() {
    this.formVerfi()
    sessionStorage.removeItem('basickeyword')
    sessionStorage.removeItem('basickeysub')
    sessionStorage.removeItem('keyword')
    sessionStorage.removeItem('keysub')
  }

  goRouter(d) {
    this.props.history.push(d)
  }
  //获取表单值
  getVal() {
    this.setState({
      account: $(".user input").val(),
    })
  }
  getVal2() {
    this.setState({
      password: $(".pwd input").val(),
    })
  }
  //登录接口
  formVerfi(e) {
    var userVal = $(".user input").val();
    var pwdVal = $(".pwd input").val();
    userVal = $.trim(userVal)
    pwdVal = $.trim(pwdVal);
    // localStorage.setItem('username', userVal)
    // localStorage.setItem('password', pwdVal)
    // console.log(pwdVal,userVal)
    if (userVal.length < 1 || pwdVal.length < 1) {
      $(".errorTips").css({ "opacity": "1" });
      $(".user input").css({ "border-color": "#ea4030" })
      return false
    } else {
      $(".errorTips").css({ "opacity": "0" });
      $(".user input").css({ "border-color": "#1890ff" });
      u.login({
        username: this.state.account,
        password: this.state.password,
      }, data => {
        console.log(data)
        if (data.code == '500') {
          message.error('用户名或密码错误');
          return
        }
        if (data.code == '400') {
          message.error('账号未激活');
          return
        }
        if (data.code === 200 && data.keyId === 20) {
          localStorage.setItem('username', userVal)
          localStorage.setItem('kId', data.keyId)
          window.location.href=u.baseUrl + 'build/index.html#/illicitName'
          return
        }
        localStorage.setItem('username', userVal)
        localStorage.setItem('kId', data.keyId)
        // this.goRouter('./capture')
        window.location.href=u.baseUrl + 'FakeSpider/login/toLogin'
        // u.userInfo(data => {
        //   localStorage.setItem('name', data.data.userName)
          // this.setState({
          //   data: data
          // })
        // });
      });

    }

  }
  render() {
    return (
      <div className="allstyle">
        <div className='shiping'>
            <video className="videoStyle video-js vjs-default-skin" autoplay="autoplay" muted="muted" loop="loop">
              <source src={require('../static/001.mp4')} type="video/mp4" />
            </video>
        </div>

        <div className="login">
          <div className="left">
            <div className="logo"></div>
            <div className="leftContainer">
              <Input
                placeholder="用户名"
                className="user"
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                style={{ marginBottom: '5%' }}
                onBlur={() => this.getVal()}
              />
              <Input
                placeholder="密码"
                type="password"
                className="pwd"
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                style={{ marginBottom: '5%' }}
                onBlur={() => this.getVal2()}
              />
              <div className="errorTips">
                请输入正确的用户名
                      </div>
              <Button type="primary"
                style={{ width: "100%", height: "45px" }}
                onClick={() => this.formVerfi()}
              >登录</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}